<template>
	<view>
		<view class="box">
			<view class="menu_content_box">
				<view class="mt25 pb5 fs32 fwb cor_000 tac">看车报告编号：{{reportId}}</view>

				<view class="mt15 area_block_1" v-for="item,index in report" :key="index">
					<view class="flex_box aic mt30">
						<view class="item">
							<view class="df">
								<image :lazy-load="true" src="/static/icon_car.png" class="img18"></image>
								<view class="ml5 fs30 fwb cor_000">{{item.name}}</view>
							</view>
						</view>
						<view class="df">
							<view class="fs28 cor_000">{{item.nonConformityNum}}项</view>
							<image :lazy-load="true" src="/static/icon_abnormal.png" class="ml10 img7"></image>
							<view class="ml25 fs28 cor_000">{{item.conformityNum}}项</view>
							<image :lazy-load="true" src="/static/icon_security_2.png" class="ml10 img7"></image>
							<image :lazy-load="true" src="/static/icon_arrow_5.png" class="ml15 img7"></image>
						</view>
					</view>
					<view class="mt30">
						<view class="flex_box aic" v-for="foo, bar in item.children" :key="bar">
							<view class="fs28 cor_333">{{foo.name}}</view>
							<view class="item">
								<input type="text" class="ipt_01" :value="foo.value" placeholder-style="color: #333;">
							</view>
							<image :lazy-load="true" :src="foo.isConformity == 0 ? '/static/icon_security_2.png' : '/static/icon_abnormal.png'"
								class="ml20 vh img7">
							</image>
						</view>

					</view>
				</view><!-- area_block_1 -->

			</view>

		</view><!-- box -->
	</view>
</template>

<script>
	import {
		toast,
		showLoading,
		hideLoading
	} from '@/utils/toast.js';
	import {
		getTestReportApi
	} from '@/http/api.js';
	export default {
		data() {
			return {
				reportId: '',
				report: [],
				array: ['请选择机身铭牌', '正常', '模糊', '损毁'],
				index: 0,
				arrayTwo: ['请选择机身铭牌', '正常', '模糊', '损毁'],
				indexTwo: 0,
			}
		},
		onLoad(option) {
			this.reportId = option.id;
			this.getTestReport();
		},
		methods: {
			getTestReport() {
				showLoading('加载中');
				getTestReportApi({
					id: this.reportId
				}).then(res => {
					this.report = res.data;
					hideLoading();
				}).catch(err => {
					hideLoading();
				})
			}
		}
	}
</script>

<style>
	.menu_content_box {
		position: relative;
		height: calc(100vh - 98rpx);
		background-color: #f7f6f6;
	}

	.consult_immediately_btn {
		display: block;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
		background: linear-gradient(90deg, #f44f33, #e10d09);
	}

	.area_block_1 {
		position: relative;
		padding: 27rpx 25rpx 38rpx 15rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.ipt_01 {
		display: inline-block;
		width: 100%;
		height: 76rpx;
		line-height: 76rpx;
		text-align: right;
		padding: 0;
		font-size: 28rpx;
		color: #333;
		background-color: transparent;
		border: none;
		border-radius: 0;
		outline: none;
	}

	.sel_area_sty {
		display: inline-block;
		width: 100%;
		height: 76rpx;
		line-height: 76rpx;
		text-align: right;
		font-size: 28rpx;
		color: #333;
		background: transparent;
	}
</style>
